<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="文档">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="watch-ref">
      <ol>
        <li>基本类型 title:{{ title }}<Button @click="title += '-@'">修改</Button></li>
        <li>基本类型 clickCnt:{{ clickCnt }}<Button @click="clickCnt += 1">修改</Button></li>
        <li>
          对象类型:{{ person }}
          <Button @click="changePersonName">修改 person.name</Button>
          <Button @click="changePersonCity">修改 person.address.city</Button>
          <Button @click="changePerson">修改整个 person</Button>
        </li>
      </ol>
      <template #action>
        <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getSource())" />
      </template>
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
  import { Button } from '@/components/Button';
  import SourceDrawer from '@/learn/SourceDrawer.vue';
  import { Icon } from '@/components/Icon';
  // 需要引入 computed 方法
  import { ref, watch } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  // 定义子组件引用
  let sourceDrawer = ref<any>(null);
  function openSource(title: string, content: string) {
    sourceDrawer.value.open({ title, content, width: '60%' });
  }

  let title = ref<string>('一级标题');
  let clickCnt = ref<number>(0);
  let person = ref({ id: 1001, name: 'lisi', address: { province: '河南', city: '郑州' } });

  function changePersonName() {
    person.value.name += '~';
  }
  function changePersonCity() {
    person.value.address.city += '*-';
  }
  function changePerson() {
    person.value = { id: 2001, name: 'zhangsan', address: { province: '河北', city: '石家庄' } };
  }

  watch([title, clickCnt], (newVal, oldVal) => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, 原数组:' + oldVal + ', 新数组:' + newVal);
  });

  watch(
    [() => person.value.name, () => person.value.address],
    (newVal, oldVal) => {
      // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
      createMessage.info('person.name 或 person.address 发生了变化, 原数组:' + oldVal + ', 新数组:' + newVal);
    },
    { deep: true },
  );
</script>

<script lang="ts">
  function getDoc() {
    return `
### watch 数组
* watch 可以监视多个元素，任意一个元素变更都会执行方法
* watch 的 array 中的元素只能是响应式对象或 Getter 函数，不能为普通对象

`;
  }

  function getSource() {
    return `
\`\`\`html
<template>
  <CollapseContainer class="mt-5" title="watch-ref">
    <ol>
      <li>基本类型 title:{{ title }}<Button @click="title += '-@'">修改</Button></li>
      <li>基本类型 clickCnt:{{ clickCnt }}<Button @click="clickCnt += 1">修改</Button></li>
      <li>
        对象类型:{{ person }}
        <Button @click="changePersonName">修改 person.name</Button>
        <Button @click="changePersonCity">修改 person.address.city</Button>
        <Button @click="changePerson">修改整个 person</Button>
      </li>
    </ol>
    <template #action>
      <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getSource())" />
    </template>
  </CollapseContainer>
</template>

\<script lang="ts" setup\>
  import { ref, watch } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  
  let title = ref<string>('一级标题');
  let clickCnt = ref<number>(0);
  let person = ref({ id: 1001, name: 'lisi', address: { province: '河南', city: '郑州' } });

  function changePersonName() {
    person.value.name += '~';
  }
  function changePersonCity() {
    person.value.address.city += '*-';
  }
  function changePerson() {
    person.value = { id: 2001, name: 'zhangsan', address: { province: '河北', city: '石家庄' } };
  }

  watch([title, clickCnt], (newVal, oldVal) => {
    // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
    createMessage.info('title 或 subTitle 发生了变化, 原数组:' + oldVal + ', 新数组:' + newVal);
  });

  watch(
    [() => person.value.name, () => person.value.address],
    (newVal, oldVal) => {
      // oldVal 为原来的 title 和 clickCnt 组成的数组，newVal 为变更后的数组
      createMessage.info('person.name 或 person.address 发生了变化, 原数组:' + oldVal + ', 新数组:' + newVal);
    },
    { deep: true },
  );
\</script\>
\`\`\`
`;
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }
</style>
